<template>
  <div>
    <el-menu default-active="/home" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff" active-text-color="#ffd04b"
             :show-timeout="200" :default-active="$route.path" :collapse="isCollapse" theme="dark" :router="router" :unique-opened="uniqueOpened">
      <template v-for="item in option">
        <router-link v-if="hasOneShowingChildren(item)" :to="item.routerUrl" :key="item.routerName">
          <el-menu-item :index="item.routerUrl">
            <i :class="item.routerIcon"></i>
            <span>{{item.routerName}}</span>
          </el-menu-item>
        </router-link>
        <el-submenu v-else :index="item.routerUrl" :key="item.routerName">
          <template slot="title">
            <i :class="item.routerIcon"></i>
            <span>{{item.routerName}}</span>
          </template>
          <el-menu class="el-menu-vertical-demo" background-color="#1f2d3d" text-color="#fff" active-text-color="#ffd04b"
                   :show-timeout="200" theme="dark" :router="router" :unique-opened="uniqueOpened">
            <el-menu-item v-for="childMenu in item.children" v-bind:key="childMenu.routerUrl" :index="childMenu.routerUrl">
              <template slot="title">
                <i :class="childMenu.routerIcon"></i>
                <span>{{childMenu.routerName}}</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
   export default {
     name: "MenuComponent",
     props: ["option","isCollapse"],
     data(){
       return {
         uniqueOpened: false,
         router: true
       }
     },
     created: function () {
     },
     methods:{
       hasOneShowingChildren(item){
         return item.children.length <= 0;
       }
     }
   }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-submenu .el-menu-item {
    padding: 0 0 !important;
  }
</style>
